<template>
	<div class="loginWrap">
		<div class="login">
			<headers :childProp="state.parentData" @sendState="sendState"></headers>
			<div class="banner">
				<p>
					<span>您好，{{ state.userInfo.realName }}</span
					><span>欢迎登录！</span>
				</p>
			</div>
			<div class="content">
				<div class="wrapItem cf" v-if="state.isShow == false">
					<p class="title">
						<span>默认分类</span>
					</p>
					<div class="platform cf">
						<div class="card" v-for="(items, indexs) in state.adminObj" :key="indexs" @click.stop="goRoute(items)">
							<img class="left" :src="items.backgroundImage" />
							<div class="rightWrap">
								<p class="rights">
									<span>{{ items.platformName }}</span>
									<span>{{ items.notes }}</span>
								</p>
								<p class="right_bottom">
									<span><i>立即进入</i><img src="@/assets/rzg/more.png" alt="" /></span>
								</p>
							</div>
						</div>
					</div>
				</div>
				<template v-else>
					<div v-for="(item, index) in state.list" :key="index">
						<div class="wrapItem cf" v-if="item.list && item.list.length > 0">
							<p class="title">
								<span>{{ item.classifyName }}</span>
							</p>
							<div class="platform cf">
								<div class="card" v-for="(items, indexs) in item.list" :key="indexs" @click.stop="goRoute(items)">
									<img v-if="items.backgroundImage" class="left" :src="items.backgroundImage" />
									<img v-else class="left" :src="bgImg" />
									<div class="rightWrap">
										<p class="rights">
											<span>{{ items.platformName }}</span>
											<span>{{ items.notes }}</span>
										</p>
										<p class="right_bottom">
											<span><i>立即进入</i><img src="@/assets/rzg/more.png" alt="" /></span>
										</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</template>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import headers from '../hmm/components/headers.vue'
import { info, platformList } from '@/api/auth-hm'
import bgImg from '../../assets/rzg/getawayBg.png'
import store from '@/store'
const route = useRoute()
const router = useRouter()
const styles = ref({
	backgroundColor: '#f00'
})
const orgId = ref()
const state = reactive({
	value: '3',
	list: [],
	parentData: {
		route: 'gateway',
		userInfo: {},
		isTrue: false
	},
	userInfo: {},
	isShow: true,
	adminObj: [
		{
			platformName: '数据管理平台',
			notes: '用户中心',
			url: '/home',
			backgroundImage: bgImg,
			id: 1
		}
	]
})
const sendState = async item => {
	orgId.value = item
	let loginForm = {
		id: item
	}
	await roleListFun(item)
	await setTimeout(() => {
		state.list = []
		platformList(loginForm).then((res: any) => {
			if (res.code === 0) {
				if (state.parentData.userInfo.superAdmin == 1) {
					if (res.data && res.data.length == 0) {
						state.isShow = false
					} else if (res.data && res.data.length == 1) {
						if (res.data[0] == undefined || res.data[0] == null) {
							state.isShow = false
						} else {
							state.isShow = true
							state.list = res.data
							let obj = {
								platformName: '数据管理平台',
								notes: '用户中心',
								url: '/home',
								backgroundImage: bgImg,
								id: 1
							}
							if (state.list[0].list) {
								state.list[0].list.unshift(obj)
							}
						}
					} else {
						state.isShow = true
						state.list = res.data
						let obj = {
							platformName: '数据管理平台',
							notes: '用户中心',
							url: '/home',
							backgroundImage: bgImg,
							id: 1
						}
						if (state.list[0].list) {
							state.list[0].list.unshift(obj)
						}
					}
				} else if (state.parentData.userInfo.superAdmin == 0 && res.data && res.data.length > 0) {
					state.isShow = true
					state.list = res.data
				} else {
					state.isShow = true
				}
			} else {
				ElMessage.error(res.msg)
			}
		})
	}, 200)
}
onMounted(() => {
	// console.log(store.userStore.token)
	// roleListFun()
	document.title = '统一登录平台'
})
const roleListFun = item => {
	let loginForm = {
		orgId: ''
	}
	if (item) {
		loginForm.orgId = item
	} else {
		loginForm.orgId = ''
	}
	info(loginForm).then((res: any) => {
		if (res.code == 0) {
			state.userInfo = res.data
			sessionStorage.setItem('userInfo', JSON.stringify(res.data))
			state.parentData.userInfo = res.data
		} else {
			ElMessage.error(res.msg)
		}
	})
}
const goRoute = item => {
	sessionStorage.setItem('platformId', item.id)
	// let userInfo =  JSON.parse(sessionStorage.getItem('userInfo'))
	if (item.url.indexOf('http') == -1 && item.url.indexOf('https') == -1) {
		store.userStore.user.id = ''
		store.routerStore.menuRoutes = []
		store.routerStore.platformPath = item.url
		router.push({
			path: item.url
		})
		store.appStore.setTitle(item.platformName)
		// sessionStorage.setItem('title', item.platformName)
	} else {
		// window.location.href = item.url
		// window.location.href = item.url + '?orgId='+userInfo.orgId+'&id='+item.id
		store.userStore.user.id = ''
		store.routerStore.menuRoutes = []
		let token = sessionStorage.getItem('token')
		// sessionStorage.setItem('title', item.platformName)
		store.appStore.setTitle(item.platformName)
		const f1 = window.location.href.split('#')[0]
		const f2 = window.location.href.split('#')[1]
		// console.log(item.url + '?token=' + token + '&orgId=' + orgId.value + '&platformId=' + item.id + '&f1=' + f1 + '&f2=' + f2)
		window.open(item.url + '?token=' + token + '&orgId=' + orgId.value + '&platformId=' + item.id + '&f1=' + f1 + '&f2=' + f2, '_blank')
	}
}
</script>

<style lang="scss" scoped>
.cf {
	zoom: 1;
}
.cf::after {
	display: block;
	height: 0;
	clear: both;
	font-size: 0;
	content: '.';
	visibility: hidden;
}
.loginWrap::-webkit-scrollbar {
	display: none;
}
.loginWrap {
	background: linear-gradient(to right, #e1ecf7, #e7f3ff);
	height: 100%;
	overflow: auto;
	.login {
		.banner {
			height: 100px;
			background: url('../../assets/hmm/6.png') no-repeat center;
			background-size: 100% 100%;
			position: relative;
			p {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 60px;

				span {
					font-size: 14px;
					color: #4e5969;
					&:nth-child(1) {
						font-size: 20px;
						color: #1d2129;
						font-weight: 700;
						margin-right: 16px;
					}
				}
			}
		}
		.content {
			padding: 8px 16px 18px;
			min-height: calc(100vh - 188px);
			background: #f0f2f5;
			.wrapItem {
				padding: 16px 0;
				.title {
					font-size: 20px;
					color: #1d2129;
					font-weight: 700;
					padding-bottom: 8px;
					border-bottom: 1px solid #f2f3f5;
					&::before {
						content: '';
						display: inline-block;
						vertical-align: middle;
						width: 4px;
						height: 20px;
						background: #409eff;
						border-radius: 4px;
						margin-right: 8px;
					}
					span {
						display: inline-block;
						vertical-align: middle;
					}
				}
				.platform {
					.card {
						float: left;
						width: 440px;
						// width: calc(25% - 15px);
						background: #fff;
						background-size: 100%;
						background-repeat: no-repeat;
						padding: 24px 24px 16px 24px;
						margin-top: 16px;
						border-radius: 4px;
						// margin-right: 20px;
						margin-right: 16px;
						height: 200px;
						box-sizing: border-box;
						border: 1px solid #fff;
						position: relative;
						// &:nth-child(4n + 4) {
						// 	margin-right: 0;
						// }
						&:hover {
							cursor: pointer;
							border-color: #409eff;
							box-shadow: #c3c8d1 0 4px 8px;
						}
						.left {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							z-index: 0;
						}
						.rightWrap {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							z-index: 1;
							.rights {
								padding: 24px 24px 16px 24px;
								height: 116px;
								span {
									display: -webkit-box;
									font-size: 14px;
									overflow: hidden;
									text-overflow: ellipsis;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 4;
									color: #86909c;
									&:nth-child(1) {
										font-size: 20px;
										font-weight: 700;
										margin-bottom: 12px;
										color: #1d2129;
									}
								}
							}
							.right_bottom {
								padding: 0 24px;
								border-top: 1px solid #e5e6eb;
								color: #409eff;
								span {
									display: inline-block;
									position: relative;
									height: 42px;
									line-height: 42px;
									i {
										display: inline-block;
										vertical-align: middle;
										font-style: normal;
									}
									img {
										display: inline-block;
										vertical-align: middle;
										width: 16px;
										height: 16px;
										margin-left: 8px;
										transform: translateY(3px);
										position: absolute;
										top: 50%;
										transform: translateY(-50%);
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
<style>
.el-select__popper .el-select-dropdown__item.selected {
	color: #409eff !important;
}
.el-dropdown__popper .el-dropdown-menu .el-dropdown-menu__item:hover {
	color: #409eff !important;
}
</style>
